<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="telephone=no" name="format-detection" />
  <title>2018临考押题卷</title>
  <meta itemprop="name" content="谁说人算不如天算？快来和我一起预测押题疯狂提分！" />
  <meta itemprop="image" content="/img/ygshare.jp" />
  <meta name="description" itemprop="description" content="《高考命题预测与题——2018临考押题卷》首发预售，火热上线！" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/tg/tg_start.css">
  <% include ../component/_common_tongji.html %>
    <style>
      [v-cloak] {
        display: none;
      }

      #show {
        display: none;
      }
    </style>
    <script>

      window.onload = function () {
        var compa = document.querySelector('#show');
        if (compa) {
          compa.style.display = 'block';
        }
      }
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>

<body>
  <div id="app" style="height:100%">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <div class="time">
        <img src="/img/tg02.png" alt="">
        <span>5</span>
        <span>月</span>
        <span>8</span>
        <span>日</span>
      </div>
      <div class="top">
        <img src="/img/tg03.png" alt="">
        <div class="lineLeft"></div>
        <div class="lineRight"></div>
      </div>
      <div class="footer">
        <p class="nav">
          <img src="/img/tg07.png" alt=""> 拼团不成功系统原路退费</p>
        <p class="banner">
          <span>{{personNumber}}人在拼团，可直接参与</span>
          <span>已拼{{success_count}}单</span>
        </p>
        <div class="tg" v-for="item in personNum">
          <img :src="item.avatar_url" alt="" class="imgs">
          <span>{{item.nickname}}</span>
          <a href="javascript:;" @click="handleJoin(item)" class="tgjoin">加入</a>
          <br>
          <span>还差{{(3-item.members.length)}}人拼成，{{item.create_time | formatDate}}</span>
        </div>
      </div>
      <div class="bottom">
        三人团：
        <span>¥218.0</span>
        <span>￥298</span>
        <button @click="handleStartTg">{{startTg}}</button>
      </div>
      <div class="join" v-if="joinMode" @click="handleJoinFalse">
      </div>
      <div class="joinmode" v-if="joinMode">
        <p>参与
          <span>{{item.nickname}}</span>的团购</p>
        <p>仅剩{{(3-item.members.length)}}个名额</p>
        <span class="boss">团长</span>
        <img :src="item.members[0].avatar_url" alt="">
        <img :src="item.members[1]?item.members[1].avatar_url:imgSrc" alt="">
        <img :src="item.members[2]?item.members[2].avatar_url:imgSrc" alt="">
        <a href="javascript:;" @click="handleJoinTg(item.id)">参与团购</a>
      </div>
    </div>
  </div>
  <script src="https://sfile.tl100.com/xgkj_tlw_web_wx/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/xgkj_tlw_web_wx/js/libs/axios.min.js"></script>
  <script src="/js/api.js"></script>
  <script src="/js/wx.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        day: '',
        hours: '',
        minute: '',
        py: 'wap',
        pay_type: '1',
        personNum: [],
        imgSrc: '/img/tg05.png',
        item: '',
        number: '2',
        personNumber: '0',
        startTg: '发起团购',
        success_count: '',
        invitation_code: '',
        res_code: 0,
        groups_info_length: '',
        token: localStorage.getItem('token'),
        joinMode: false,
        submiting: false,
      },
      mounted() {
        this.getUserInfo();
        // 获取用户购买信息，团购成功转到pay_sucess
        var vm = this;
        // clearInterval(timeId);
        <% if (pt) {%>
          this.pt = "<%= pt %>";
        <%}%>

        wxObj({
          shareUrl: 'https://m.tl100.com/tg',
          title: '谁说人算不如天算？快来和我一起预测押题疯狂提分！',
          desc: '《高考命题预测与题——2018临考押题卷》首发预售，火热上线！',
          link: '?',
          imgUrl: 'img/ygshare.jpg'
        });
      },
      filters: {
        formatDate(v) {
          // 过滤器，每个团的下单时间+7天到当前的倒计时
          var now = new Date();
          var endDate = new Date(v);
          var leftTime = endDate.getTime() + (7 * 24 * 3600 * 1000) - now.getTime();
          if (leftTime < 0) {
            return '已不能参团,此团超过活动时间';
          }
          return '剩余' + parseInt(leftTime / 86400 / 1000) + '天' + parseInt(leftTime / 3600 / 1000 % 24) + ':' + parseInt(leftTime / 60 / 1000 % 60) + ':' + parseInt(leftTime / 1000 % 60);//计算剩余的天数
        }
      },
      methods: {
        handleJoin(item) {
          this.item = item;
          // 如果有团购信息就不能参加其他的团购
          if (this.res_code == 1) {
            alert('您正在参加团购，不能再加入其他团购');
            return;
          }
          // 不能参加团购的弹出框
          this.joinMode = true;
        },
        handleJoinFalse() {
          // 点击确定后弹出框消失
          this.joinMode = false;
        },
        getUserInfo() {
          var vm = this;
          // 获取所有的团信息
          api.post('/api/pre_buy_book/getGroupPurchaseBookInfo', {
            exam_id: 3
          }).then(function (res) {
            vm.personNum = res.data.msg.group_purchase_info.underway_group;
            vm.personNumber = res.data.msg.group_purchase_info.underway_group.length;
            vm.success_count = res.data.msg.group_purchase_info.success_count;
            if (res.data.res_code < 0) {
              localStorage.removeItem("token");
              setLog('/api/pre_buy_book/getGroupPurchaseBookInfo:fail', JSON.stringify(res.data));
            }
          }).catch(function (error) {
            setLog('/api/pre_buy_book/getGroupPurchaseBookInfo:catch', JSON.stringify(error));
          });
          // 获取用户信息判断当前页面显示发起团购还是查看团购
          if (localStorage.getItem('token') != '' && localStorage.getItem('token') != null) {
            api.post('/api/pre_buy_book/getFinishGroupPurchaseInfo', {
              token: localStorage.getItem('token')
            }).then(function (res) {
              if (res.data.res_code == 1) {
                vm.groups_info_length = res.data.msg.groups_info[0].member_info.length;
                vm.startTg = '查看团购信息';
                vm.invitation_code = res.data.msg.my_invitation_code;
                vm.res_code = 1;
              }
              if (res.data.res_code < 0) {
                localStorage.removeItem("token");
                setLog('/api/pre_buy_book/getFinishGroupPurchaseInfo:fail', JSON.stringify(res.data));
              }
            }).catch(function (error) {
              setLog('/api/pre_buy_book/getFinishGroupPurchaseInfo:catch', JSON.stringify(error));
            });
          }
        },
        handleJoinTg(id) {
          // 参与团购，加入别人的团
          var url = '/tg/signup';
          if (location.search == "") {
            url += "?tg=tg&group_purchase_id=" + id + "&pt=<%= pt %>";
          } else {
            url += location.search + "&tg=tg&group_purchase_id=" + id;
          }
          location.replace(url);
        },
        handleStartTg() {
          // 如果有用户信息判断是否三人成团，如果成团跳转团购成功页，否则跳转支付成功页
          if (this.res_code == 1) {
            if (this.groups_info_length == 3) {
              location.href = '/tg/tg_success?invitation_code=' + this.invitation_code;
              return;
            }
            location.href = '/tg/pay_success';
            return;
          }
          // 如果没有用户信息跳转支付页，带上微信登录的code和团购id，group_purchase_id为-1的时候是发起团购，否则是加入别人的团
          var url = '/tg/signup';
          if (location.search == "") {
            url += "?tg=tg&group_purchase_id=-1&pt=<%= pt %>";
          } else {
            url += location.search + "&tg=tg&group_purchase_id=-1";
          }
          location.href = url;
        }
      }
    })

  </script>
</body>

</html>